<script setup>
	import { ref } from 'vue';
	// 视频里面的方法 设置 x
	// const x = ref(1)

	// 我的方法 这样只需要修改 percents 即可
	const percents = [0, 25, 30, 50, 75, 100];
	// 对应的下标
	const indexPer = ref(0);
</script>

<template>
	<!-- 
	 	视频里面的方法
		<div class="progress">
			<div
				class="inner"
				:style="{ width: x / 4 * 100 + '%'} "
			>
				<span>{{ x / 4 * 100 }}%</span>
			</div>
		</div>
		<button @click="x = 1">设置25%</button>
		<button @click="x = 2">设置50%</button>
		<button @click="x = 3">设置75%</button>
		<button @click="x = 4">设置100%</button>
	-->

	<!-- 我的方法 -->
	<div class="progress">
		<div class="inner" :style="{ width: percents[indexPer] + '%' }">
			<span>{{ percents[indexPer] }}%</span>
		</div>
	</div>
	<button @click="indexPer = index" v-for="(percent, index) in percents">
		设置 {{ percent }} %
	</button>
</template>

<style>
	.progress {
		height: 25px;
		width: 400px;
		border-radius: 15px;
		background-color: #272425;
		border: 3px solid #272425;
		box-sizing: border-box;
		margin-bottom: 30px;
	}

	.inner {
		height: 20px;
		border-radius: 10px;
		text-align: right;
		position: relative;
		background-color: #409eff;
		background-size: 20px 20px;
		box-sizing: border-box;
		transition: all 1s;
	}

	.inner span {
		position: absolute;
		right: -25px;
		bottom: -25px;
	}
</style>
